<template>
  <div>
    <table border="0">
      <tr>
        <th>标题</th>
        <th>类型</th>
        <th>国家</th>
        <th>缩略图</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in newsdata" :key="item.id">
        <td @click="showdetail(item.id)">{{ item.title }}</td>
        <td>纵火</td>
        <td>韩国</td>
        <td>
          <img width="140px" :src="require('../../assets' + item.imgUrl)" />
        </td>
        <td><span class="delBtn">删除</span></td>
      </tr>
    </table>
    <span v-for="item in pageCount" @click="getpagedata(item)" :key="item">{{
      item
    }}</span>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      newsdata: [],
      pageCount: 3,
    };
  },
  created: async function () {
    // 获取新闻列表数据
    let { data } = await this.$http.get("/api/getdata");
    //    console.log(data);
    this.newsdata = data;
  },
  methods: {
    showdetail(id) {
      // console.log(id);
      this.$router.push({ name: "newsdetail", query: { id } });
    },
    // async getpagedata(p) {
    //   //   console.log(p);
    //   let {data} = await this.$http.get("/api/getpagedata?p=" + p);
    // //   console.log(res);
    //     this.newsdata = data;
    // },
     getpagedata(p) {
         let nowP = this.$route.query;
        //  console.log(nowP);
         if(nowP.p!=p){
             this.$router.push({name:"newslist",query:{p}});
         }
    }
  },
  watch:{
      $route:async function(to){
        //   console.log("路由改变了",to);
        let p = to.query.p;
        // console.log(p);
        let {data} = await this.$http.get("/api/getpagedata?p=" + p);
        this.newsdata = data;
      }
  }
};
</script>

<style scoped>
table {
  border-left: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  margin-top: 40px;
  width: 100%;
}
table td,
th {
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
.delBtn {
  cursor: pointer;
}
a {
  text-decoration: none;
}
</style>